<template>
     <wsPage title="发布活动">
         <div slot="page_operate">
			<Button @click="goBack"><Icon></Icon><span>返回</span></Button>
		</div>       
        <wsSmPanel>
            <!-- 活动内容 -->
            <div slot="active_content" style="padding-bottom:10px;">
                <Form :label-width="100" >     
                    <FormItem label="语言版本" style="" required>
			            <Select class="ws-form-select" v-model="addNavigate.languageCode">
                            <Option :value="item.code" v-for="(item,index) in fields.languages" v-bind:key="index">{{item.motherTongue}}/{{item.english}}</Option>
                        </Select>
			        </FormItem>             
                     <FormItem label="活动名称" style="" required>
			            <!-- 活动名称 -->
                       <Input type="text" placeholder="请输入" style="width:50%;" v-model="addNavigate.name"></Input>
			        </FormItem>
                    <!-- 活动描述 -->
                     <!-- <FormItem label="活动描述" style="" required>
			            
                        <Input type="textarea" :autosize="{minRows: 5,maxRows: 7}" placeholder="请输入..." style="width:50%;" v-model="addActivities.wDesc"/>
			        </FormItem> -->
                    <FormItem label="活动链接" style="" required>
			            <!-- 添加地址链接 -->
                       <Input type="text" placeholder="添加地址链接" style="width:50%;" :value="addNavigate.url"   v-model="addNavigate.url"></Input>
			        </FormItem>
                    <FormItem label="活动封面" style="height:300px;" required>
			            <!-- 上传封面图片 -->
                        <div style="width: 250px;height:250px;border:1px solid #ccc;float:left;" class="left-side" >
                            <div :style="{backgroundImage:'url('+form.upload.imgData+')',backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: '100% auto',width:'100%',height:'100%'}"></div>
                            <!-- 上传图片 -->
                            <ws-upload-cos ref="upload" catelog="merchants" :cfile-key="form.upload.fileKey" :show-upload-list="false" :format="['jpg','jpeg','png','gif']" :max-size="2048" :on-success="uploadSuccess" type="drag">
                                <Button>添加图片</Button>
                            </ws-upload-cos>
                            
                            <!-- 备注 -->
                            <div>只支持JPG .PNG gif格式(1:1)</div>
                        </div>
			        </FormItem>
                    
                </Form>
            </div>
            <!-- 活动设置 -->
            <!-- <div slot="active_setting" style="padding-bottom:10px;height:400px;">
                <Form :label-width="100" >
                    <FormItem label="语言版本" style="" required>
			            <Select class="ws-form-select" v-model="addActivities.languageCode">
                            <Option :value="item.code" v-for="(item,index) in fields.languages" v-bind:key="index">{{item.motherTongue}}/{{item.english}}</Option>
                        </Select>
			        </FormItem>
                    <FormItem label="活动时间" style="" required>
                        <Row>
			                <Col span="4">
			                    <FormItem>
			                        <DatePicker type="datetime" placeholder="开始时间" v-model="addActivities.startDate" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			                <Col span="1" style="text-align: center">——</Col>
			                <Col span="4">
			                    <FormItem>
			                        <DatePicker type="datetime" placeholder="结束时间" v-model="addActivities.endDate" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			            </Row>
			        </FormItem>
                     
                </Form>
                
            </div> -->
          
        </wsSmPanel>
           <!-- 提交活动 -->
          <Button type="success" style="margin-left:100px;" @click="commitNavigate">提交活动</Button>  
     </wsPage> 
        
</template>
<script>
export default {
    data(){
        return{
            // 语言类型
            fields: {
                languages: []
            },
            form: {
                upload: {
                    fileKey: "",
                    imgData:''
                }
            },
            // 发布活动数据
            addActivities:{
                name:'', //活动名称
                wDesc:'', //活动描述
                coverImgUrl:'' ,//活动背景图
                url:'https://api.beautystudio.com.cn/h5/#/' , //活动链接
                languageCode:'' ,//活动语言类型
                startDate:'', //活动开始时间
                endDate:'' ,//活动结束时间
            },
            addNavigate:{
                name : '',
                url : 'https://api.beautystudio.com.cn/h5/#/',
                imgUrl : '',
                languageCode : 'zh'
            }     
            
        } 
    },
    compouted:{

    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            this.initLanguages();
        },
        goBack() {
    		this.$router.push({name: 'ops_activities_list'});
        },
         /**
         * 加载翻译语言列表
         */
        initLanguages() {
            const _this = this;
            this.axios.get('/ws/ops/v2/languages/translatable').then(response => {
                var res = response.data;
                var resMeta = res.meta;
                if(0 == resMeta.code) {
                    _this.fields.languages = res.data;
                } else {
                    _this.$Message.warning(resMeta.message);
                }
            });
        },
        /**
        图片上传成功保存地址url
            */
        uploadSuccess(response, file, fileList) {
            if(0 == response.meta.code) {
                this.form.upload.fileKey = response.data.fileId;
                this.form.upload.imgData=response.data.Location;
                this.addActivities.coverImgUrl=response.data.Location;
                this.addNavigate.imgUrl = response.data.Location;
            }
        },
        // 确认时间
        //查询开始时间段必填
        dateConfirm(){
            let searchStartTime = this.addActivities.startDate;
            let searchEndTime = this.addActivities.endDate;
            if (searchStartTime != null ||searchStartTime != '') {
                searchEndTime = new Date();
                console.log(searchEndTime);
            } else if (searchEndTime != null || searchEndTime !='') {
                searchStartTime = searchEndTime;
                
            }
        },

        //发布导航数据
        commitNavigate(){
            let _this=this;
            let postData={
                "name":_this.addNavigate.name,
                "imgUrl":_this.addNavigate.imgUrl,
                "url":_this.addNavigate.url,
                "languageCode":_this.addNavigate.languageCode
            }
            // console.log(postData);
            // return;
            if(postData.name == ''){
                _this.$Message.info("请填写活动名称");
                return;
            }
            if(postData.url == ''){
                _this.$Message.info("请填写活动链接");
                return;
            }
            if(postData.imgUrl == ''){
                _this.$Message.info("请上传图片");
                return;
            }
            console.log(postData);
            this.axios.post('/ws/ops/product/addNavigation',postData).then(response=>{
                var res = response.data;
                var resMeta = res.meta;
                if(0 == resMeta.code) {
                    // _this.fields.languages = res.data;
                     _this.$Message.info('发布活动成功');
                     setTimeout(() => {
                         _this.goBack();
                     }, 2000);
                } else {
                    _this.$Message.warning(resMeta.message);
                }
            })
        },
        // 发布活动数据
        commitActivities(){
            let _this=this;
            let postData={
                "name":_this.addActivities.name,
                "wDesc":_this.addActivities.wDesc,
                "coverImgUrl":_this.addActivities.coverImgUrl,
                "url":_this.addActivities.url,
                "languageCode":_this.addActivities.languageCode,
                "startDate":_this.addActivities.startDate,
                "endDate":_this.addActivities.endDate
            }
            console.log(postData);
            this.axios.post('/ws/ops/activity',postData).then(response=>{
                var res = response.data;
                var resMeta = res.meta;
                if(0 == resMeta.code) {
                    // _this.fields.languages = res.data;
                     _this.$Message.info('发布活动成功');
                } else {
                    _this.$Message.warning(resMeta.message);
                }
            })
        }
    }
}
</script>
<style>

</style>
